<template>
	<!-- 活动糖果领取详情列表 -->
	<view class="active-detail">
		<view class="list">
			<view class="list-item u-flex u-row-between" v-for="(item, index) in tableDate" :key="index">
				<view class="u-flex-1 u-flex">
					<u-image style="margin-right: 10rpx;border-radius: 50%;overflow: hidden;" width="100rpx" height="100rpx" mode="aspectFit" :src="item.avatar"></u-image>
					<view>
						<view class="user-name u-font-md">{{item.nickname}}</view>
						<view class="date-time mar-top">{{item.createDate}}</view>
					</view>
				</view>
				<view class="u-text-right">
					<view class="primary-deep">领取糖果数量：{{item.sweets}}</view>
					<view class="waring mar-top">{{item.time}}天前领取</view>
				</view>
			</view>
		</view>
		<u-empty v-show="tableDate.length <= 0" style="padding-top: 100rpx;" text="领取记录暂时没有数据" mode="list"></u-empty>
	</view>
</template>

<script>
export default{
	data() {
		return {
			id: 0,
			tableDate: []
		}
	},
	onLoad(option) {
		this.id = option.id;
		this.getData()
	},
	methods: {
		getData() {
			this.$u.api.getActivityDetails({id: this.id}).then(res=>{
				if(res.code == 0){
					this.tableDate = res.data;
				}else{
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		}
	}
	
}
</script>

<style scoped>
	.list-item {
		padding: 30rpx;
		font-size: 24rpx;
		border-bottom: 1rpx solid #F2F2F2;
	}
	.user-name {
		color: #222222;
		font-weight: bold;
	}
	.primary-deep {
		color: #357CD4;
	}
	.waring {
		color: #F3B613;
	}
	.date-time {
		color: #A4A4A4;
	}
	.flex-col {
		flex-direction: column;
	}
	.mar-top {
		margin-top: 20rpx;
	}
</style>
